<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios基本使用</title>
</head>
<body>
<input class="get" type="button" value="get请求">
<input class="post" type="button" value="post请求">
<input class="haha" type="button" value="haha请求">
<input class="xixi" type="button" value="xixi请求">

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    // import {axios} from "../lib/axios";

    // axios.defaults.withCredentials = true;

    document.querySelector(".get").onclick = function () {
        // 请求的url
        let url = 'http://www.liulongbin.top:3006/api/get'
        // 请求的参数 对象
        let paramObj = {name: 'zs', age: 20}
        // 调用 axios.get() 发起GET请求
        axios.get(url, {params: paramObj})
            .then((res) => {
                // res.data是服务器返回的数据
                let data = res.data;
                console.log(res)
            })
    }

    document.querySelector(".post").onclick = function () {
        axios({
            url: 'http://www.liulongbin.top:3006/api/post',
            method: 'post',
            data: {bookname: '程序员的自我修养', price: 4396}
        })
            .then((res) => {
                console.log(res)
            }, (res) => {
                console.log(res)
            });
    }

    document.querySelector('.haha').addEventListener('click', (e) => {
        axios.get('https://autumnfish.cn/api/joke/list', {params: {num: 3}})
            .then((res) => {
                console.log(res)
            }, (err) => {
                console.log(err)
            })
    })


    document.querySelector('.xixi').addEventListener('click', (e) => {
        axios({
            url: 'https://autumnfish.cn/api/joke/list',
            method: 'get',
            // GET 参数需要通过 params 属性提供, 而POST需要 data 属性提供
            params: {
                num: 3
            },
        }).then((res) => {
            alert('请求成功')
            console.log(res)
        }, (res) => {
            console.log('请求失败')
        })
    })


</script>

</body>
</html>
